<template>
  <base-breadcrumb
    :breadcrumb="!isPD"
    :style="{ paddingTop: isPD ? '10px' : '0' }"
  >
    <a-card
      :body-style="{ padding: '20px 15px' }"
      :bordered="false"
    >
      <div
        v-if="isPD"
        style="display: flex; justify-content: flex-end; position: relative; z-index: 999"
      >
        <a-icon
          title="关闭页面"
          style="font-size: 20px"
          class="base-btn"
          type="close"
          @click="handleClose"
        />
      </div>
      <a-row :gutter="24">
        <a-col
          class="titleWrap"
          :md="24"
          :sm="24"
        >
          <titleName title="施工进度总计划看板" />
          <a
            class="advanceBtn"
            style="margin-left: 8px"
            @click="showPlanBoard = !showPlanBoard"
          >
            <a-icon :type="showPlanBoard ? 'up' : 'down'" />
          </a>
        </a-col>
      </a-row>

      <a-row
        v-show="showPlanBoard"
        :gutter="24"
      >
        <a-col
          style="background-color: #e6f3fc; padding: 6px; margin-left: 12px"
          :md="8"
          :sm="8"
        >
          <a-icon
            style="background-color: #0e7ed0; color: #fff; border-radius: 50%"
            type="info"
          />
          当前日期：<span class="totalNum">{{ currentDate }}</span>
        </a-col>
        <a-col
          :md="9"
          :sm="9"
          class="taltitle"
        >
          <a-icon
            type="check-circle"
            theme="twoTone"
            two-tone-color="#52c41a"
          /> 节点完成情况
        </a-col>
      </a-row>
      <a-row
        v-show="showPlanBoard"
        :gutter="24"
      >
        <a-col
          :md="9"
          :sm="9"
        >
          <div style="overflow: hidden">
            <div class="totalPrecents blue">
              {{ details.completionRate || '0.00%' }}
            </div>
            <div class="totalPrecents blue">
              {{ details.onTimeCompletionRate || '0.00%' }}
            </div>
            <div class="totalPrecents pink">
              {{ details.overdueOneCode || 0 }}
            </div>
            <div class="totalPrecents pink">
              {{ details.overdueTwoCode || 0 }}
            </div>
            <div class="totalPrecents pink">
              {{ details.overdueThreeCode || 0 }}
            </div>
          </div>
          <div style="overflow: hidden">
            <div class="totalPrecentsTitle blue">
              节点完成率
            </div>
            <div class="totalPrecentsTitle blue">
              节点按时完成率
            </div>
            <div class="totalPrecentsTitle pink">
              逾期一级节点数
            </div>
            <div class="totalPrecentsTitle pink">
              逾期二级节点数
            </div>
            <div class="totalPrecentsTitle pink">
              逾期三级节点数
            </div>
          </div>
        </a-col>
        <a-col
          :md="9"
          :sm="9"
        >
          <div style="overflow: hidden; display: flex">
            <div class="finishTitle">
              按期完成节点数
            </div>
            <div class="finishTitle">
              逾期完成节点数
            </div>
            <div class="finishTitle">
              逾期未完成节点数
            </div>
            <div class="finishTitle">
              正进行节点数
            </div>
            <div class="finishTitle">
              未开始节点数
            </div>
          </div>
          <div style="overflow: hidden; display: flex">
            <div
              class="finishTotal plan"
              @mouseenter="handleZoom('按期完成', 'open')"
              @mouseleave="handleZoom('按期完成', 'close')"
            >
              <div class="totalCount">
                {{ details.finishCodeNum || 0 }}个
              </div>
              <!-- <div class="precents">{{ details.finishCodeRate || '0.00%' }}</div> -->
            </div>
            <div
              class="finishTotal finish"
              @mouseenter="handleZoom('逾期完成', 'open')"
              @mouseleave="handleZoom('逾期完成', 'close')"
            >
              <div class="totalCount">
                {{ details.overdueCodeNum || 0 }}个
              </div>
              <!-- <div class="precents">{{ details.overdueCodeRate || '0.00%' }}</div> -->
            </div>
            <div
              class="finishTotal unfinish"
              @mouseenter="handleZoom('逾期未完成', 'open')"
              @mouseleave="handleZoom('逾期未完成', 'close')"
            >
              <div class="totalCount">
                {{ details.overdueUnfinishNum || 0 }}个
              </div>
              <!-- <div class="precents">{{ details.overdueUnfinishRate || '0.00' }}</div> -->
            </div>
            <div
              class="finishTotal ongoing"
              @mouseenter="handleZoom('正进行', 'open')"
              @mouseleave="handleZoom('正进行', 'close')"
            >
              <div class="totalCount">
                {{ details.progressCodeNum || 0 }}个
              </div>
              <!-- <div class="precents">{{ details.progressCodeRate || '0.00%' }}</div> -->
            </div>
            <div
              class="finishTotal nostart"
              @mouseenter="handleZoom('未开始', 'open')"
              @mouseleave="handleZoom('未开始', 'close')"
            >
              <div class="totalCount">
                {{ details.noStartCodeNum || 0 }}个
              </div>
              <!-- <div class="precents">{{ details.noStartCodeRate || '0.00%' }}</div> -->
            </div>
          </div>
          <div style="background-color: #e6f3fc; padding: 6px">
            <span>当前实际完成节点数：</span><a>{{ details.actualFinishNum || 0 }}</a><span>个</span>
            <a-divider type="vertical" />
            <span>当前应该完成节点数：</span><a>{{ details.currentShouldNum || 0 }}</a><span>个</span>
          </div>
        </a-col>
        <a-col
          :md="6"
          :sm="6"
        >
          <linegraph
            id="barGraph0"
            ref="linegraph"
            :data="option"
            style="width: 300px; height: 250px; margin-top: -85px"
          />
        </a-col>
      </a-row>
    </a-card>

    <a-card
      :body-style="{ padding: '20px 15px' }"
      :bordered="false"
      style="margin-top: 10px"
    >
      <a-row :gutter="24">
        <a-col
          class="titleWrap"
          :md="24"
          :sm="24"
        >
          <title-name title="施工进度总计划日历表" />
          <a
            class="advanceBtn"
            style="margin-left: 8px; left: 195px"
            @click="showPlanCalendar = !showPlanCalendar"
          >
            <a-icon :type="showPlanCalendar ? 'up' : 'down'" />
          </a>
        </a-col>
      </a-row>

      <div
        v-show="showPlanCalendar"
        style="
                    float: left;
                    text-align: center;
                    border: 1px solid #dcdcdc;
                    padding: 5px;
                    margin: 11px;
                    border-radius: 4px;
                "
        @click="getTodayData"
      >
        <div>回到当月</div>
      </div>

      <div
        v-show="showPlanCalendar"
        style="float: right; text-align: center; border: 1px solid #dcdcdc; padding: 5px"
        @click="toggleStart"
      >
        <div>切换</div>
        <div>{{ isStart ? '(以结束时间显示)' : '(以开始时间显示)' }}</div>
      </div>

      <a-calendar
        v-show="showPlanCalendar"
        ref="calender"
        class="calendersWrapper"
        :value="valueTime"
        @panelChange="onPanelChange"
      >
        <div
          slot="dateCellRender"
          slot-scope="value"
          class="events"
        >
          <div
            v-for="(item, index) in calenderData[value.format('YYYY-MM-DD')] || []"
            :key="index"
          >
            <div
              v-if="item.statusLights == 0"
              style="
                                background-color: rgba(242, 242, 242, 1);
                                border-radius: 3px;
                                margin-top: 3px;
                                padding: 3px;
                            "
              @click="onDateChange(item)"
            >
              {{ item.name }}<br>
              {{ item.type }}
              <span v-if="item.promptLights == 1"><img
                  src="../../../assets/icons/yellowLight.png"
                  width="20"
                  hight="20"
                ></span>
              <span v-if="item.promptLights == 2"><img
                  src="../../../assets/icons/redLight.png"
                  width="20"
                  hight="20"
                ></span><br>
              {{ item.startTime }}——{{ item.endTime }}
            </div>
            <div
              v-if="item.statusLights == 1"
              style="
                                background-color: rgba(224, 244, 223, 1);
                                border-radius: 3px;
                                margin-top: 3px;
                                padding: 3px;
                            "
              @click="onDateChange(item)"
            >
              {{ item.name }}<br>
              {{ item.type }}
              <span v-if="item.promptLights == 1"><img
                  src="../../../assets/icons/yellowLight.png"
                  width="20"
                  hight="20"
                ></span>
              <span v-if="item.promptLights == 2"><img
                  src="../../../assets/icons/redLight.png"
                  width="20"
                  hight="20"
                ></span><br>
              {{ item.startTime }}——{{ item.endTime }}
            </div>
            <div
              v-if="item.statusLights == 2"
              style="
                                background-color: rgba(251, 230, 232, 1);
                                border-radius: 3px;
                                margin-top: 3px;
                                padding: 3px;
                            "
              @click="onDateChange(item)"
            >
              {{ item.name }}<br>
              {{ item.type }}
              <span v-if="item.promptLights == 1"><img
                  src="../../../assets/icons/yellowLight.png"
                  width="20"
                  hight="20"
                ></span>
              <span v-if="item.promptLights == 2"><img
                  src="../../../assets/icons/redLight.png"
                  width="20"
                  hight="20"
                ></span><br>
              {{ item.startTime }}——{{ item.endTime }}
            </div>
            <div
              v-if="item.statusLights == 3"
              style="
                                background-color: rgba(240, 153, 164, 1);
                                border-radius: 3px;
                                margin-top: 3px;
                                padding: 3px;
                            "
              @click="onDateChange(item)"
            >
              {{ item.name }}<br>
              {{ item.type }}
              <span v-if="item.promptLights == 1"><img
                  src="../../../assets/icons/yellowLight.png"
                  width="20"
                  hight="20"
                ></span>
              <span v-if="item.promptLights == 2"><img
                  src="../../../assets/icons/redLight.png"
                  width="20"
                  hight="20"
                ></span><br>
              {{ item.startTime }}——{{ item.endTime }}
            </div>
          </div>
        </div>
      </a-calendar>
    </a-card>

    <a-modal
      v-model="visible"
      width="900px"
      :title="title"
    >
      <template slot="footer">
        <a-button
          key="back"
          @click="handleCancel"
        >
          取消
        </a-button>
        <a-button
          key="submit"
          v-btnPermission="'pm_009_sub_03'"
          :loading="loading"
          type="primary"
          @click="handleOk"
        >
          提交审批
        </a-button>
      </template>
      <a-form-model
        ref="form1"
        :model="form"
        :rules="rules1"
        :style="'width: 100%; max-height: '+GET_REDRESS_PERCENTAGE * 0.7+'vh; overflow-y: auto; overflow-x: hidden'"
      >
        <title-name title="节点完成信息" />
        <a-row :gutter="24">
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-item
              label="工程名称"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="form.projectName"
                placeholder=""
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-item
              label="业务事项"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="form.businessMatters"
                placeholder=""
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-item
              label="阶段/类别"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="form.type"
                placeholder=""
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-item
              label="节点等级"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="form.controLevel"
                placeholder=""
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-item
              label="计划开始时间"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="form.startTime"
                placeholder=""
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-item
              label="计划完成时间"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="form.endTime"
                placeholder=""
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-item
              label="亮灯情况"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <div v-if="form.promptLights == 1">
                <img
                  src="../../../assets/icons/yellowLight.png"
                  width="20"
                >
              </div>
              <div v-if="form.promptLights == 2">
                <img
                  src="../../../assets/icons/redLight.png"
                  width="20"
                >
              </div>
              <div
                v-if="form.statusLights == 1"
                class="lighton1"
              />
              <div
                v-if="form.statusLights == 2"
                class="lighton2"
              />
              <div
                v-if="form.statusLights == 3"
                class="lighton3"
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-item
              label="节点状态"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="form.statusName"
                placeholder=""
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="节点完成时间"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="completeTime"
            >
              <a-date-picker
                v-model="form.completeTime"
                style="width: 100%"
                format="YYYY-MM-DD"
                :disabled="delayedDays > 10"
                :disabled-date="getDisabledCompleteTime"
                @change="onChange"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            v-if="unOerdue"
            :md="12"
            :sm="12"
          >
            <a-form-item
              label="备注"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseTextarea
                v-model="form.remark"
                placeholder="请输入"
              />
            </a-form-item>
          </a-col>

          <a-col
            v-if="isOerdue"
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="逾期类别"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="overdueTypeId"
            >
              <a-select
                v-model="form.overdueTypeId"
                style="width: 100%"
                placeholder="请选择逾期类别"
              >
                <a-select-option
                  v-for="item in types"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row
          v-if="isOerdue"
          :gutter="24"
        >
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="逾期原因"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="overdueReason"
            >
              <BaseTextarea
                v-model="form.overdueReason"
                placeholder="请输入逾期原因"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="完成标准"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseTextarea
                v-model="form.standard"
                :disabled="true"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="验收资料"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="form.validations"
                :disabled="true"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <title-name
          v-if="isOerdue"
          title="有效赶工措施"
        />
        <a-row
          v-if="isOerdue"
          :gutter="24"
        >
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="劳动力资源"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="laborResources"
            >
              <BaseTextarea
                v-model="form.laborResources"
                placeholder="请输入劳动力资源"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="劳动力赶工费用(万元)"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="laborResFee"
            >
              <BaseInputNumber
                v-model.number="form.laborResFee"
                :min="0"
                placeholder="请输入劳动力赶工费用"
                @change="getTotal"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row
          v-if="isOerdue"
          :gutter="24"
        >
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="机械设备资源"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="equipmentResources"
            >
              <BaseTextarea
                v-model="form.equipmentResources"
                placeholder="请输入机械设备资源"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="机械设备赶工费用(万元)"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="equipResFee"
            >
              <BaseInputNumber
                v-model.number="form.equipResFee"
                :min="0"
                placeholder="请输入机械设备赶工费用"
                @change="getTotal"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row
          v-if="isOerdue"
          :gutter="24"
        >
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="材料资源"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="materialResources"
            >
              <BaseTextarea
                v-model="form.materialResources"
                placeholder="请输入材料资源"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="材料赶工费用(万元)"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="materialResFee"
            >
              <BaseInputNumber
                v-model.number="form.materialResFee"
                :min="0"
                placeholder="请输入材料赶工费用"
                @change="getTotal"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row
          v-if="isOerdue"
          :gutter="24"
        >
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="安全管理措施"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="safetyMeasures"
            >
              <BaseTextarea
                v-model="form.safetyMeasures"
                placeholder="请输入安全管理措施"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="安全管理赶工费用(万元)"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="safetyMeasureFee"
            >
              <BaseInputNumber
                v-model.number="form.safetyMeasureFee"
                :min="0"
                placeholder="请输入安全管理赶工费用"
                @change="getTotal"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row
          v-if="isOerdue"
          :gutter="24"
        >
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              label="预计赶工费用(万元)"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="form.estimatedRushCost"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <div class="title-name">
          第三方完工确认单上传
        </div>
        <u-table
          :upload-arrys="uploadArrys1"
          :business-code="businessCode"
          :list-url="listUrl"
          :upload-list="uploadList"
          :business-id="businessId"
          :delete-url="deleteUrl"
          @fileArrysData="fileArrysData"
        />

        <title-name
          title="附件信息"
          style="margin-top: 20px"
        />
        <u-table
          :upload-arrys="uploadArrys2"
          :business-code="businessCode2"
          :list-url="listUrls"
          :upload-list="uploadList"
          :business-id="businessId"
          :delete-url="deleteUrl"
          @fileArrysData="fileArrysDatas"
        />
      </a-form-model>
    </a-modal>

    <!--</a-card>-->
    <a-card
      :body-style="{ padding: '20px 15px' }"
      :bordered="false"
      style="margin-top: 20px"
    >
      <a-row :gutter="24">
        <a-col
          class="titleWrap"
          :md="24"
          :sm="24"
        >
          <titleName title="施工进度总计划详情" />
          <a
            class="advanceBtn"
            style="margin-left: 8px"
            @click="showPlanDetais()"
          >
            <a-icon :type="showPlanDetail ? 'up' : 'down'" />
          </a>
        </a-col>
      </a-row>
      <a-row
        v-show="showPlanDetail"
        :gutter="24"
      >
        <a-col
          :md="24"
          :sm="24"
        >
          <a-button
            v-btnPermission="'pm_009_mon_01'"
            style="margin-bottom: 20px"
            type="primary"
            @click="month()"
          >
            月计划
          </a-button>
          <a-button
            v-btnPermission="'pm_009_wek_02'"
            class="ml12"
            style="margin-bottom: 20px"
            type="primary"
            @click="week()"
          >
            周计划
          </a-button>
          <a-button
            class="ml12"
            style="margin-bottom: 20px"
            type="primary"
            @click="showDrawer()"
          >
            查看甘特图
          </a-button>
          <a-button
            class="ml12"
            type="primary"
            @click="$refs.bigDataTable.setAllTreeExpansion()"
          >
            展开全部
          </a-button>
          <a-button
            class="ml12"
            type="primary"
            @click="$refs.bigDataTable.clearTreeExpand()"
          >
            收起全部
          </a-button>
        </a-col>
      </a-row>

      <div
        v-show="showPlanDetail"
        class="pub-table-select-count"
      >
        <a-icon
          type="info-circle"
          theme="twoTone"
        />
        <span style="margin-right: 12px">
          项目：<span class="totalNum">{{ nodeDeltails.projectName }}</span> 节点共<span class="totalNum">
            {{ nodeDeltails.nodeTotal }} </span>项 | 一级节点共 <span class="totalNum">{{ nodeDeltails.firstNodeNum }}</span> 项 | 二级节点共
          <span class="totalNum">{{ nodeDeltails.secondNodeNum }}</span> 项</span>
        | 三级节点共 <span class="totalNum">{{ nodeDeltails.thirdNodeNum }}</span> 项 | 周期天数
        <span class="totalNum">{{ nodeDeltails.duration }}</span> 天 周期间隔
        <span class="totalNum"> {{ nodeDeltails.startTime }}——{{ nodeDeltails.endTime }}</span>
      </div>

      <div
        v-show="showPlanDetail"
        class="gantt-layout"
      >
        <drag-modal
          :visible="visibles"
          title="项目总计划甘特图"
          @cancel="visibles = false"
        >
          <template slot="footer">
            <a-button
              key="back"
              @click="handleCancels"
            >
              关闭
            </a-button>
          </template>
          <gantt
            ref="ganttCom"
            class="left-container"
            :columns="ganttColumns"
            :plugins="plugins"
            :tasks="tasks"
            :height="700"
          />
        </drag-modal>

        <!-- 总计划详情表格 -->
        <a-spin :spinning="loadingState.isTable">
          <umi-table
            ref="bigDataTable"
            show-header-overflow
            show-body-overflow
            :row-height="30"
            :height="700"
            :expand-icon-column-index="2"
            :tree-config="{
              children: 'children',
              expandAll: false
            }"
            row-key="id"
            row-id="id"
            :use-virtual="true"
            @toggle-tree-expand="rowExpand"
            @cell-click="handleCellClick"
          >
            <u-table-column
              v-for="item in columns"
              :key="item.dataIndex"
              :prop="item.dataIndex"
              :label="item.title"
              :width="item.width"
              :tree-node="item.dataIndex === 'name'"
              align="center"
            >
              <template v-slot="{ row }">
                <div
                  v-if="item.scopedSlots"
                  :title="row[item.dataIndex]"
                >
                  <div v-if="item.dataIndex === 'num'">
                    <span v-if="row.promptLights == 1 && row.promptLights != null">
                      <img
                        src="../../../assets/icons/yellowLight.png"
                        width="20"
                        hight="20"
                      ></span>
                    <span v-if="row.promptLights == 2 && row.promptLights != null">
                      <img
                        src="../../../assets/icons/redLight.png"
                        width="20"
                        hight="20"
                      ></span>
                    <span v-if="row.statusLights == 1 && row.statusLights != null">
                      <div style="background: rgba(224, 244, 223, 1); width: 40px; height: 20px" />
                    </span>
                    <span v-if="row.statusLights == 2 && row.statusLights != null">
                      <div style="background: rgba(251, 230, 232, 1); width: 40px; height: 20px" />
                    </span>
                    <span v-if="row.statusLights == 3 && row.statusLights != null">
                      <div style="background: rgba(240, 153, 164, 1); width: 40px; height: 20px" />
                    </span>
                  </div>
                  <div
                    v-if="item.dataIndex === 'verifyDoc'"
                    class="ellipsis"
                  >
                    <span>{{ row.verifyDoc }}</span>
                  </div>
                  <div
                    v-if="item.dataIndex === 'completeStandard'"
                    class="ellipsis"
                  >
                    <span>{{ row.completeStandard }}</span>
                  </div>
                  <div
                    v-if="item.dataIndex === 'name'"
                    class="ellipsis"
                  >
                    <span>{{ row.name }}</span>
                  </div>
                  <div
                    v-if="item.dataIndex === 'businessMatters'"
                    class="ellipsis"
                  >
                    <span>{{ row.businessMatters }}</span>
                  </div>
                  <div
                    v-if="item.dataIndex === 'feedback'"
                    class="ellipsis"
                  >
                    <span>{{ row.feedback }}</span>
                  </div>
                  <div
                    v-if="item.dataIndex === 'firstResponsible'"
                    class="ellipsis"
                  >
                    <span>{{ row.firstResponsible }}</span>
                  </div>

                  <div v-if="item.dataIndex === 'operation'">
                    <a
                      v-if="row.level == 4"
                      v-btnPermission="'pm_009_loo_04'"
                      @click="handleSub(row)"
                    >查看
                    </a>
                    <span v-if="row.statusCode == 0 || row.statusCode == 1 || row.statusCode == 5">
                      <a-divider type="vertical" /><a
                        v-btnPermission="'pm_009_mai_05'"
                        @click="handleEdit(row)"
                      >节点维护</a>
                    </span>
                    <span v-if="row.reviewButton == 1">
                      <a-divider type="vertical" /><a
                        v-btnPermission="'pm_009_moi_06'"
                        @click="handleApprove(row)"
                      >审批信息</a>
                    </span>
                  </div>
                </div>
                <div
                  v-else
                  :title="row[item.dataIndex]"
                >
                  {{ row[item.dataIndex] }}
                </div>
              </template>
            </u-table-column>
          </umi-table>
        </a-spin>
      </div>

      <ApprovalDetails
        :title="'审批详情'"
        :business-id="businessId1"
        :visible="visibleApprove"
        @cancel="visibleApprove = false"
        @confirm="visibleApprove = false"
      />
      <!-- 查看节点详情 -->
      <a-modal
        :visible="visibleState.nodeDetail"
        :footer="null"
        title="节点详情"
        width="1200px"
        destroy-on-close
        @cancel="visibleState.nodeDetail = false"
      >
        <NodeDetail
          :is-component="true"
          :init-data="childInitData"
        />
      </a-modal>
    </a-card>
  </base-breadcrumb>
</template>

<script>
import { UTable, UTableColumn } from 'umy-ui'
import linegraph from './linegraph'
import { getTypes } from '@/api/commons'
import {
  nodeMaintain,
  getNodeAndCalenderDetails,
  getMasterPlanDetails,
  getNodeDetails
} from '@/api/construction/nodeMaintain'
import { gantt } from 'dhtmlx-gantt'
import Gantt from '../gantt/gantt'
import moment from 'moment'
import DragModal from '@/components/DragModal'
import ApprovalDetails from '@/components/approvalDetails'
import AFormModelItem from 'ant-design-vue/es/form-model/FormItem'
import NodeDetail from './details'
import {mapGetters } from 'vuex'
const columns = [
  {
    title: '',
    dataIndex: 'num',
    width: 60,
    scopedSlots: { customRender: 'num' }
  },
  {
    title: '编号',
    width: 60,
    dataIndex: 'sortNum'
  },
  {
    title: '阶段/类别',
    dataIndex: 'name',
    width: 250,
    scopedSlots: { customRender: 'name' },
    ellipsis: true
  },
  {
    title: '业务事项',
    dataIndex: 'businessMatters',
    width: 165,
    scopedSlots: { customRender: 'businessMatters' },
    ellipsis: true
  },
  {
    title: '管控级别',
    dataIndex: 'controlLevelName',
    width: 100,
    ellipsis: true
  },
  {
    title: '周期',
    dataIndex: 'duration',
    width: 100,
    ellipsis: true
  },
  {
    title: '计划开始日期',
    dataIndex: 'startTime',
    width: 120,
    ellipsis: true
  },
  {
    title: '计划完成日期',
    dataIndex: 'endTime',
    width: 120,
    ellipsis: true
  },
  {
    title: '实际完成时间',
    dataIndex: 'completeTime',
    width: 120,
    ellipsis: true
  },
  {
    title: '完成标准',
    dataIndex: 'completeStandard',
    width: 165,
    scopedSlots: { customRender: 'completeStandard' },
    ellipsis: true
  },
  {
    title: '验证资料',
    dataIndex: 'verifyDoc',
    width: 165,
    scopedSlots: { customRender: 'verifyDoc' },
    ellipsis: true
  },
  {
    title: '第一责任人',
    dataIndex: 'firstResponsible',
    width: 165,
    scopedSlots: { customRender: 'firstResponsible' }
  },
  {
    title: '直接责任人',
    dataIndex: 'responsible',
    width: 120,
    ellipsis: true
  },
  {
    title: '责任人反馈',
    dataIndex: 'feedback',
    width: 165,
    scopedSlots: { customRender: 'feedback' },
    ellipsis: true
  },
  {
    title: '节点状态',
    dataIndex: 'statusName',
    width: 120,
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    width: 200,
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  name: 'StandardList',
  components: {
    AFormModelItem,
    linegraph,
    Gantt,
    ApprovalDetails,
    DragModal,
    umiTable: UTable,
    UTableColumn,
    NodeDetail
  },
  data() {
    return {
      childInitData: {},
      visibleState: {
        nodeDetail: false
      },
      loadingState: {
        isTable: false // 施工进度总计划详情的表格loading
      },
      loading: false,

      businessId1: '',
      visibleApprove: false,
      showPlanBoard: true,
      showPlanCalendar: true,
      showPlanDetail: false,

      types: [],
      uploadArrys1: [], // 第三方文件上传
      uploadArrys2: [], // 其他文件上传

      title: '节点完成维护',

      businessCode: 'PM02',
      businessCode2: 'PM03',

      // 附件上传
      listUrl: '',
      listUrls: '',
      deleteUrl: '/cscec-project-business/file/business/project-fileDelete',
      uploadList: '/cscec-project-business/file/business/fileUpload',
      businessId: '',

      statusLights: '', // 状态亮灯 （0：无色，1：绿色，2：浅红色，3：红色）
      promptLights: '', // 提示亮灯 （0：不亮灯，1：黄灯，2：红灯）

      unOerdue: false,
      isOerdue: false,

      complateDate: false,
      uncomplateDate: false,

      completionTimes: '',

      form: {
        laborResFee: 0,
        equipResFee: 0,
        materialResFee: 0,
        safetyMeasureFee: 0,
        estimatedRushCost: 0
      }, // 表单对象

      // valueTime:moment('2020-10-25'),
      valueTime: null,
      columns,
      completionTime: '',
      currentDate: '',
      nodeDeltails: {}, // 节点总计详情
      tableData: [],
      ganttData: { data: [] },
      isGanttDataOk: false,
      createValue: [],
      isStart: true, // 日历开始时间 结束时间
      isEndTime: true, // 是否是结束时间

      advanced: false,

      visibles: false,
      tasks: { data: [], links: [] },
      ganttColumns: [],
      plugins: {
        undo: true,
        drag_timeline: true
      },

      visible: false,
      confirmLoading: false,
      // planData:{'2000-10-10':{id:'',datas:[]}},
      mdl: {},
      // 图表
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          show: true,
          orient: 'vertical',
          left: 10,
          data: []
        },
        title: {
          text: '0',
          textAlign: 'center',
          top: 130,
          left: 145,
          textStyle: {
            fontSize: 14,
            color: 'black',
            fontWeight: 400
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: [],
            label: {
              fontSize: 14,
              position: 'center',
              color: 'black'
            },
            data: [{ value: 0, name: '节点总数' }]
          },
          {
            name: '',
            type: 'pie',
            radius: ['60%', '80%'],
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold'
              }
            },
            label: {
              formatter: '{d}%',
              color: 'black',
              fontSize: 12,
              marginTop: 200,
              height: 200,
              padding: [-10, -20]
            },
            data: [
              {
                value: 0,
                name: '按期完成',
                itemStyle: {
                  normal: {
                    color: 'rgba(224, 244, 223, 1)'
                  }
                },
                emphasis: {
                  itemStyle: {
                    color: 'rgba(224, 244, 223, 1)'
                  }
                }
              },
              {
                value: 0,
                name: '逾期完成',
                itemStyle: {
                  normal: {
                    color: 'rgba(251, 230, 232, 1)'
                  }
                },
                emphasis: {
                  itemStyle: {
                    color: 'rgba(251, 230, 232, 1)'
                  }
                }
              },
              {
                value: 0,
                name: '逾期未完成',
                itemStyle: {
                  normal: {
                    color: 'rgba(240, 153, 164, 1)'
                  }
                },
                emphasis: {
                  itemStyle: {
                    color: 'rgba(240, 153, 164, 1)'
                  }
                }
              },
              {
                value: 0,
                name: '正进行',
                itemStyle: {
                  normal: {
                    color: 'rgba(255, 255, 76, 1)'
                  }
                },
                emphasis: {
                  itemStyle: {
                    color: 'rgba(255, 255, 76, 1)'
                  }
                }
              },
              {
                value: 0,
                name: '未开始',
                itemStyle: {
                  normal: {
                    color: 'rgba(215, 215, 215, 1)'
                  }
                },
                emphasis: {
                  itemStyle: {
                    color: 'rgba(215, 215, 215, 1)'
                  }
                }
              }
            ]
          }
        ]
      },

      previewVisible: false,
      previewImage: '',
      fileList: [
        {
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        }
      ],

      headers: {
        authorization: 'authorization-text'
      },
      queryParam: {
        projectName: '',
        name: ''
      },

      status: 'all',
      fileArryDatas: [], // 第三方文件上传
      otherfiles: [], // 其他文件上传
      details: {}, // 节点详情数据
      editData: {},
      calenderData: [],
      currentMonth: {},
      rules1: {
        completeTime: [{ required: true, message: '请选择节点完成时间', trigger: 'change' }],
        overdueTypeId: [{ required: true, message: '请选择逾期类别', trigger: 'change' }],
        overdueReason: [{ required: true, message: '请输入逾期原因', trigger: 'blur' }],
        laborResources: [{ required: true, message: '请输入劳动力资源', trigger: 'blur' }],
        laborResFee: [{ required: true, message: '请输入劳动力赶工费用', trigger: 'blur' }],
        equipmentResources: [{ required: true, message: '请输入机械设备资源', trigger: 'blur' }],
        equipResFee: [{ required: true, message: '请输入机械设备赶工费用', trigger: 'blur' }],
        materialResources: [{ required: true, message: '请输入材料资源', trigger: 'blur' }],
        materialResFee: [{ required: true, message: '请输入材料赶工费用', trigger: 'blur' }],
        safetyMeasures: [{ required: true, message: '请输入安全管理资源', trigger: 'blur' }],
        safetyMeasureFee: [{ required: true, message: '请输入安全管理赶工费用', trigger: 'blur' }]
      }
    }
  },
  computed: {
  ...mapGetters(['GET_REDRESS_PERCENTAGE']),
    // 是否为项目部，如果是的话，则隐藏面包屑，显示关闭按钮
    isPD() {
      return this.$route.query.isPD === 'is'
    },
    // 已逾期天数(未逾期时返回-1)
    delayedDays() {
      if (this.form.statusCode != 5) {
        return -1
      }
      const now = moment(new Date())
      const days = now.diff(this.form.endTime, 'days')
      return days
    }
  },
  watch: {
    delayedDays: {
      immediate: true,
      handler(val) {
        // 如果逾期超过10天，那么自动填充节点完成时间为今天
        if (val > 10) {
          this.form = {
            ...this.form,
            completeTime: moment(new Date()).format('YYYY-MM-DD')
          }
        }
      }
    },
    tableData(list) {
      if (this.$refs.bigDataTable) {
        // 获取之前展开数据
        const expandRecords = this.$refs.bigDataTable.getTreeExpandRecords()
        // 获取之前滚动高度(表格实例上的scrollTop属性，在滚动到底部时会小于真实的scrollTop值，因此直接从dom获取真实滚动高度)
        const scrollTop = this.$refs.bigDataTable.tableExample().bodyWrapper.scrollTop
        // 加载数据
        this.$refs.bigDataTable.reloadData(list).then(() => {
          // 数据加载完成出现之后，打开之前的展开行
          expandRecords.forEach((row) => {
            this.$refs.bigDataTable.setTreeExpansion(row, true)
          })
          // 还原之前滚动高度
          this.$refs.bigDataTable.pagingScrollTopLeft(scrollTop)
        })
      }
    }
  },
  mounted() {},
  created() {
    this.getCurrentDate()

    this.getTypes()

    this.getPlanTotalDetails()

    this.tasks.data = []
    this.tasks.links = []
    this.ganttColumns = [
      {
        name: 'sortNum',
        label: '编号',
        align: 'center',
        resize: true,
        tree: false,
        width: 40,
        template: function (obj) {
          return obj.$index + 1
        }
      },
      {
        name: 'name',
        label: '阶段/类别',
        align: 'left',
        resize: true,
        tree: false,
        width: 140,
        template: function (obj) {
          return obj.text
        }
      }
    ]
    gantt.config.date_format = '%Y-%m-%d'
    const cfg = gantt.config
    const strToDate = gantt.date.str_to_date(cfg.date_format, cfg.server_utc)

    gantt.templates.parse_date = function (date) {
      return strToDate(date)
    }

    gantt.config.layout = {
      css: 'gantt_container',
      cols: [
        {
          min_width: 140,
          width: 140,
          rows: [
            { view: 'grid', scrollX: 'gridScroll', scrollable: true, scrollY: 'scrollVer' },
            { view: 'scrollbar', id: 'gridScroll', group: 'horizontal' }
          ]
        },
        { resizer: true, width: 1 },
        {
          rows: [
            { view: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' },
            { view: 'scrollbar', id: 'scrollHor', group: 'horizontal' }
          ]
        },
        { view: 'scrollbar', id: 'scrollVer' }
      ]
    }
  },

  methods: {
    /**
     * 查询节点完成时间需要禁用的时段
     */
    getDisabledCompleteTime(val) {
      const now = new Date()
      if (this.delayedDays < 0) {
        // 未逾期，可选择时间到今天（即今天之后的日期全部禁用）
        return moment(val).isAfter(now)
      }
      if (this.delayedDays <= 10) {
        // 逾期10天以内，只能选择完成时间到今天这个时间段（即除了这个时间段，其他日期全部禁用）
        return moment(val).isBefore(this.form.endTime) || moment(val).isAfter(now)
      }
      if (this.delayedDays > 10) {
        // 逾期10天以上，全部禁用
        return true
      }
    },
    /**
     * 点击单元格，切换展开
     */
    handleCellClick(row, column) {
      const { id, pl_table_expand } = row
      const { property } = column
      if (property === 'name') {
        this.$refs.bigDataTable.toggleTreeExpansion(row, true)
        this.toggleGantt(id, pl_table_expand)
      }
    },
    /**
     * 项目部人员登录时，关闭实施管理的预览
     */
    handleClose() {
      sessionStorage.setItem('setPD', 'done')
      this.$close()
    },
    handleCancels() {
      this.visibles = false
    },
    showPlanDetais() {
      this.showPlanDetail = !this.showPlanDetail
      this.getMasterPlanDetails()
    },
    handleZoom(name, type) {
      this.$refs.linegraph.handleZoom(name, type)
    },
    getTypes() {
      getTypes({ type: 11 }).then((res) => {
        this.types = res.data
      })
    },
    handleSub(row) {
      this.childInitData = {
        id: row.id,
        isdelay: row.statusLights,
        reviewButton: row.reviewButton
      }
      this.visibleState.nodeDetail = true
      // this.$router.push({
      //   path: '/construction-node/details',
      //   query: { id: value.id, isdelay: value.statusLights, reviewButton: value.reviewButton },
      // })
    },
    getTotal() {
      this.form.estimatedRushCost =
        (parseFloat(this.form.laborResFee) || 0) +
        (parseFloat(this.form.equipResFee) || 0) +
        (parseFloat(this.form.materialResFee) || 0) +
        (parseFloat(this.form.safetyMeasureFee) || 0)
    },
    //判断是否延期未完成
    isDelay() {
      let endTime = new Date(this.form.endTime)
      let completeTime = new Date(this.form.completeTime)

      console.log(completeTime.getTime() > endTime.getTime())
      if (completeTime.getTime() > endTime.getTime()) {
        this.form.statusCode = 5
      } else {
        this.form.statusCode = 0
      }
    },
    onChange(val) {
      this.form.completeTime = val.format('YYYY-MM-DD')
      console.log('zzz', val)
      this.isDelay()
      console.log(this.form.statusCode)
      if (this.form.statusCode == 5) {
        // 状态  0待进行、1正进行、2审核中、3计划完成、4延期完成、5延期未完成
        this.unOerdue = false
        this.isOerdue = true

        var d1 = new Date()
        var year = d1.getFullYear() //年
        var month = d1.getMonth() + 1 //月
        var day = d1.getDate() //日

        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }
        console.log()
        var nowTime = new Date(year + '-' + month + '-' + day) // 当前时间

        var startTime = new Date(this.form.startTime) // 节点计划开始时间
        var endTime = new Date(this.form.endTime) // 节点计划完成时间

        let days = parseInt(Math.abs(nowTime.getTime() - endTime.getTime()) / 1000 / 60 / 60 / 24)

        var futureTime = new Date(this.GetDateStr(10))

        var currentFutureTime = new Date(this.GetDateStr(1))

        if (days > 10) {
          this.completionTimes = year + '-' + month + '-' + day
          this.uncomplateDate = true
          this.complateDate = false
        } else if (nowTime > endTime && days < 10) {
          this.uncomplateDate = false
          this.complateDate = true

          var completeTime = new Date(this.form.completeTime)

          if (completeTime > futureTime || completeTime >= currentFutureTime || completeTime < endTime) {
            this.$message.error('当前逾期时间未超过十天，节点完成时间不能大于计划完成时间的十天后!')
            this.form.completeTime = undefined
            return
          }
        } else if (nowTime < startTime) {
          this.uncomplateDate = false
          this.complateDate = true
        }
      } else {
        this.unOerdue = true
        this.isOerdue = false
        this.uncomplateDate = false
        this.complateDate = true
      }
    },

    GetDateStr(AddDayCount) {
      var dd = new Date()
      dd.setDate(dd.getDate() + AddDayCount) //获取AddDayCount天后的日期
      var y = dd.getFullYear()
      var m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 //获取当前月份的日期，不足10补0
      var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() //获取当前几号，不足10补0

      return y + '-' + m + '-' + d
    },

    getPlanTotalDetails() {
      this.editData.planId = this.$route.query.planId
      this.editData.date = this.currentMonth
      this.editData.isEndTime = this.isEndTime
      getNodeAndCalenderDetails(this.editData).then((res) => {
        this.details = res.data.planTotal
        this.option.title.text = res.data.planTotal.nodeTotal
        this.option.series[0].data[0].value = res.data.planTotal.nodeTotal
        this.option.series[1].data[0].value = res.data.planTotal.finishCodeNum
        this.option.series[1].data[1].value = res.data.planTotal.overdueCodeNum
        this.option.series[1].data[2].value = res.data.planTotal.overdueUnfinishNum
        this.option.series[1].data[3].value = res.data.planTotal.progressCodeNum
        this.option.series[1].data[4].value = res.data.planTotal.noStartCodeNum
        res.data.calendar.map((item) => {
          const wt = item.workTime
          this.$set(this.calenderData, wt, item.children)
        })
        this.$nextTick()
      })
    },

    getTodayData() {
      var returnCurrentMonth = moment(new Date()).format('YYYY-MM') // year + "-"+month
      this.valueTime = moment(returnCurrentMonth)
      this.currentMonth = returnCurrentMonth
      this.getPlanTotalDetails()
    },
    valuesToTask(values) {
      return {
        id: values.id,
        parent: values.parent,
        text: values.name || values.businessMatters,
        name: values.name,
        businessMatters: values.businessMatters,
        // endTime: values.endTime || '',
        // startTime: values.startTime|| '',
        start_date: values.start_date || values.startTime || '2020-12-20',
        startDate: values.startDate || values.startTime || '2020-12-20',
        end_date: values.end_date || values.endTime || '2020-12-20',
        endDate: values.endDate || values.endTime || '2020-12-20',
        duration: values.duration,
        parentId: values.parentId,
        type: values.type,
        preTask: values.preTask,
        matters: values.businessMatters,
        levelType: values.levelType,
        responsible: values.responsible,
        firstResponsible: values.firstResponsible,
        level: values.level,
        workPackId: values.workPackId,
        open: values.open
      }
    },
    renderGantt() {
      if (this.isGanttDataOk) {
        return
      }
      gantt.clearAll()
      gantt.parse(this.ganttData)
      this.isGanttDataOk = true
    },
    buildGanttData(treeData, open) {
      const ganttData = {
        data: []
      }
      const readTreeData = (children, parent) => {
        children.forEach((c) => {
          const data = { ...c, id: c.id, type: c.children ? 'project' : '', parent, open }
          ganttData.data.push(this.valuesToTask(data))
          if (c.children && c.children.length > 0) {
            readTreeData(c.children, c.id, open)
          }
        })
      }
      readTreeData(treeData, null, open)
      return ganttData
    },
    getMasterPlanDetails() {
      if (this.loadingState.isTable) {
        return
      }
      this.loadingState.isTable = true
      getMasterPlanDetails(this.$route.query.planId)
        .then((res) => {
          this.loadingState.isTable = false
          if (res.code == 200) {
            this.tableData = res.data.list
            if (this.tableData.length > 0) {
              this.ganttData = this.buildGanttData(this.tableData, true)
            }

            this.nodeDeltails = res.data
          }
        })
        .catch(() => {
          this.loadingState.isTable = false
        })
    },
    fileArrysData(val) {
      this.fileArryDatas = val
    },
    fileArrysDatas(val) {
      this.otherfiles = val
    },
    week() {
      this.$router.push({
        path: '/construction/week/list',
        query: { id: this.$route.query.planId, projectName: this.nodeDeltails.projectName }
      })
    },
    month() {
      this.$router.push({
        path: '/construction/month/list',
        query: { id: this.$route.query.planId, projectName: this.nodeDeltails.projectName }
      })
    },
    getCurrentDate() {
      var d1 = new Date()
      var year = d1.getFullYear() //年
      var month = d1.getMonth() + 1 //月
      var day = d1.getDate() //日

      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      this.currentMonth = year + '-' + month
      this.currentDate = year + '-' + month + '-' + day
    },

    handleEdit(record) {
      // 节点维护

      this.uploadArrys1 = []
      this.uploadArrys2 = []

      getNodeDetails(record.id).then((res) => {
        if (res.code == 200) {
          this.visible = true
          this.form = {
            ...res.data,
            completeTime: this.form.completeTime || res.data.completeTime
          }

          if (res.data.overdueTypeId == null) {
            this.form.overdueTypeId = undefined
          }

          if (this.form.statusCode == 5) {
            // 状态  0待进行、1正进行、2审核中、3计划完成、4延期完成、5延期未完成
            this.unOerdue = false
            this.isOerdue = true

            var d1 = new Date()
            var year = d1.getFullYear() //年
            var month = d1.getMonth() + 1 //月
            var day = d1.getDate() //日

            if (month < 10) {
              month = '0' + month
            }
            if (day < 10) {
              day = '0' + day
            }
            var nowTime = new Date(year + '-' + month + '-' + day) // 当前时间

            var startTime = new Date(this.form.startTime) // 节点计划开始时间
            var endTime = new Date(this.form.endTime) // 节点计划完成时间

            let days = parseInt(Math.abs(nowTime.getTime() - endTime.getTime()) / 1000 / 60 / 60 / 24)
            var futureTime = new Date(this.GetDateStr(10))
            var currentFutureTime = new Date(this.GetDateStr(1))

            if (days > 10) {
              this.completionTimes = year + '-' + month + '-' + day
              this.uncomplateDate = true
              this.complateDate = false
              this.unOerdue = false
              this.isOerdue = true
            } else if (nowTime > endTime && days < 10) {
              this.uncomplateDate = false
              this.complateDate = true
              this.unOerdue = false
              this.isOerdue = true
              var completeTime = new Date(this.form.completeTime)
              if (completeTime > futureTime || completeTime >= currentFutureTime || completeTime < endTime) {
                this.$message.error('当前逾期时间未超过十天，节点完成时间不能大于计划完成时间的十天后!')
                return
              }
            } else if (nowTime < startTime) {
              this.uncomplateDate = false
              this.complateDate = true
              this.unOerdue = false
              this.isOerdue = true
            }
          } else {
            this.unOerdue = true
            this.isOerdue = false
            this.uncomplateDate = false
            this.complateDate = true
          }
        }
      })
    },

    handleApprove(record) {
      this.visibleApprove = true
      this.businessId1 = record.id
    },

    onClose() {
      this.visibles = false
    },
    showDrawer() {
      this.visibles = true
      this.renderGantt()
    },
    afterVisibleChange(visible) {
      if (visible) {
        gantt.refreshData()
      }
    },
    rowExpand(task, realRow, e) {
      e.stopPropagation()
      const { pl_table_expand } = task
      this.toggleGantt(task.id, pl_table_expand)
    },
    /**
     * 切换甘特图状态
     */
    toggleGantt(id, flag = false) {
      // if(flag) {
      //   gantt.open(id)
      // } else {
      //   gantt.close(id)
      // }
    },

    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    toggleStart() {
      this.isStart = !this.isStart
      this.isEndTime = !this.isEndTime

      this.calenderData = []
      this.getPlanTotalDetails()
    },
    onDateChange(value) {
      let _this = this
      _this.uploadArrys1 = []
      _this.uploadArrys2 = []
      //详情
      // _this.$router.push({path:'/construction/node/details',query:{id:value.id,isdelay:0}})

      //维护

      if (value.statusCode == 2 || value.statusCode == 3 || value.statusCode == 4) {
        _this.$router.push({
          path: '/construction-node/details',
          query: { id: value.id, isdelay: value.statusLights }
        })
      } else {
        getNodeDetails(value.id).then((res) => {
          if (res.code == 200) {
            _this.visible = true
            _this.form = res.data
          }

          if (this.form.statusCode == 5) {
            // 状态  0待进行、1正进行、2审核中、3计划完成、4延期完成、5延期未完成
            this.unOerdue = false
            this.isOerdue = true

            var d1 = new Date()
            var year = d1.getFullYear() //年
            var month = d1.getMonth() + 1 //月
            var day = d1.getDate() //日

            if (month < 10) {
              month = '0' + month
            }
            if (day < 10) {
              day = '0' + day
            }

            var nowTime = new Date(year + '-' + month + '-' + day) // 当前时间

            var completionTime = new Date(this.form.endTime) // 选择节点完成时间

            let days = parseInt(Math.abs(nowTime.getTime() - completionTime.getTime()) / 1000 / 60 / 60 / 24)
            if (days > 10) {
              this.completionTimes = year + '-' + month + '-' + day
              this.uncomplateDate = true
              this.complateDate = false
            } else {
              this.uncomplateDate = false
              this.complateDate = true
            }
          } else {
            this.unOerdue = true
            this.isOerdue = false
            this.uncomplateDate = false
            this.complateDate = true
          }
        })
      }
    },
    onPanelChange(value) {
      // 选择年月
      if (value != undefined) {
        this.currentMonth = value.format('YYYY-MM')
      }
      this.valueTime = moment(this.currentMonth)
      this.getPlanTotalDetails()
    },

    getListData(value) {
      const key = value.format('YYYY-MM-DD')

      return this.calenderData[key] || []
    },

    handleCancel() {
      this.visible = false
    },

    handleOk() {
      // 节点维护提交
      let that = this
      if (that.loading) return
      that.$refs.form1.validate((err, value) => {
        if (err) {
          var d1 = new Date()
          var year = d1.getFullYear() //年
          var month = d1.getMonth() + 1 //月
          var day = d1.getDate() //日

          if (month < 10) {
            month = '0' + month
          }
          if (day < 10) {
            day = '0' + day
          }

          var nowTime = new Date(year + '-' + month + '-' + day) // 当前时间

          var endTime = new Date(that.form.endTime) // 计划完成

          var startTime = new Date(that.form.startTime) // 计划开始
          // 已逾期 1.当前时间未超过十天，则选择时间不能大于计划完成时间
          // 2.当前时间超过十天 实际完成时间默认为当天
          // 3.如果时间还未到开始时间可任意选择

          let days = parseInt(Math.abs(nowTime.getTime() - endTime.getTime()) / 1000 / 60 / 60 / 24)
          var futureTime = new Date(that.GetDateStr(10))
          var currentFutureTime = new Date(that.GetDateStr(1))

          if (days > 10) {
            that.completionTimes = year + '-' + month + '-' + day
            that.uncomplateDate = true
            that.complateDate = false
          } else if (nowTime > endTime && days < 10) {
            that.uncomplateDate = false
            that.complateDate = true

            var completeTime = new Date(that.form.completeTime)
            if (completeTime > futureTime || completeTime >= currentFutureTime || completeTime < endTime) {
              that.$message.error('当前逾期时间未超过十天，节点完成时间不能大于计划完成时间的十天后!')
              return
            }
          } else if (nowTime < startTime) {
            that.uncomplateDate = false
            that.complateDate = true
          }

          if (that.isOerdue == true) {
            // if((that.form.controLevel == '一级节点' || that.form.controLevel == '二级节点') && that.isOerdue == true){
            if (
              that.form.equipmentResources == null ||
              that.form.laborResources == null ||
              that.form.materialResources == null ||
              that.form.safetyMeasures == null ||
              that.form.estimatedRushCost == null
            ) {
              that.$message.error('请先完善有效赶工措施信息！')
              return
            }
          }
          if (that.fileArryDatas.length == 0) {
            that.$message.error('请先上传第三方完工确认单附件！')
            return
          }

          that.form.thirdCommonIdList = that.fileArryDatas
          that.form.otherCommonIdList = that.otherfiles

          that.loading = true
          nodeMaintain(that.form).then((res) => {
            that.loading = false
            if (res.data.code == 200) {
              that.$message.success('提交成功！')
              that.getMasterPlanDetails()
              that.visible = false
              that.getPlanTotalDetails()
            }
          })
        }
      })
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange1({ fileList }) {
      this.fileList = fileList
    }
  }
}
</script>

<style lang="less" scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
/deep/.el-table td {
  padding: 2px 0;
}
.ant-fullcalendar-fullscreen /deep/ .ant-fullcalendar-header .ant-radio-group label {
  display: none;
}
.taltitle {
  margin-left: 35px;
  line-height: 30px;
}
.titleWrap {
  position: relative;
  .advanceBtn {
    position: absolute;
    left: 180px;
    top: -2px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 16px;
  }
}
.totalPrecents {
  width: 17%;
  text-align: center;
  height: 60px;
  line-height: 55px;
  background-color: #f6f6f6;
  border-top: 5px solid #e0e0e0;
  border-radius: 4px;
  margin: 10px 8px 10px 0;
  float: left;
}
.totalPrecentsTitle {
  float: left;
  width: 17%;
  margin: 0 8px 10px 0;
  font-size: 12px;
}
.blue {
  color: #108ee9;
  font-weight: bold;
}
.pink {
  color: #f099a4;
  font-weight: bold;
}
.totalCount {
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  color: #484444;
}
.precents {
  font-size: 14px;
  text-align: center;
  color: #484444;
}
.finishTitle {
  float: left;
  width: 17%;
  margin: 0 10px 0 0;
  font-size: 12px;
  text-align: center;
  flex: auto;
}
.finishTitle:last-child {
  margin-right: 0;
}
.finishTotal {
  width: 17%;
  height: 60px;
  border-radius: 4px;
  margin: 10px 10px 10px 0;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: auto;
}
.finishTotal:last-child {
  margin-right: 0;
}
.finishTotal.plan {
  background-color: rgba(224, 244, 223, 1);
}
.finishTotal.finish {
  background-color: rgba(251, 230, 232, 1);
}
.finishTotal.unfinish {
  background-color: rgba(240, 153, 164, 1);
}
.finishTotal.ongoing {
  background-color: rgba(255, 255, 76, 1);
}
.finishTotal.nostart {
  background-color: rgba(215, 215, 215, 1);
}
.wrapper-row {
  padding-left: 55px;
  font-weight: bold;
  letter-spacing: 1px;
}
// 日历
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
/deep/ .ant-fullcalendar-header {
  text-align: left;
}
/deep/ form .ant-select,
form .ant-cascader-picker {
  width: 15%;
}
/deep/ .ant-btn {
  border-radius: 5px;
}
/deep/ .ant-calendar-picker-input.ant-input {
  width: 100%;
}
/deep/ .ant-input {
  width: 70%;
  border-radius: 5px;
}
/deep/ .ant-calendar-picker {
  width: 70%;
  border-radius: 5px;
}
/deep/ .ant-card.ant-card-bordered {
  border-radius: 5px;
}
.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span {
    line-height: 20px;
  }
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.title-name {
  border-left: 5px solid #1890ff;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
  padding-left: 15px;
  height: 20px;
  line-height: 20px;
}
.ant-modal-dragmodal.modal-box /deep/ .ant-modal-mask {
  background: none !important;
}
/deep/ .table-page-search-wrapper .ant-form-inline .ant-row .ant-col.ant-col-sm-24.ant-col-md-12 {
  padding-left: 80px;
}

/deep/
  .calendersWrapper.ant-fullcalendar-fullscreen
  .ant-fullcalendar
  .ant-fullcalendar-calendar-body
  .ant-fullcalendar-tbody
  .ant-fullcalendar-active-week
  .ant-fullcalendar-cell.ant-fullcalendar-selected-day
  .ant-fullcalendar-date
  .ant-fullcalendar-value {
  color: rgba(0, 0, 0, 0.65);
}
/deep/
  .calendersWrapper.ant-fullcalendar-fullscreen
  .ant-fullcalendar
  .ant-fullcalendar-calendar-body
  .ant-fullcalendar-tbody
  .ant-fullcalendar-active-week
  .ant-fullcalendar-cell.ant-fullcalendar-selected-day
  .ant-fullcalendar-date {
  background: none;
}
/deep/
  .calendersWrapper
  .ant-fullcalendar-fullscreen
  .ant-fullcalendar-month-panel-current-cell
  .ant-fullcalendar-month,
.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-date {
  border-top-color: #e8e8e8;
}
</style>
